<template>
<div class="root">
  
  <div class="left">

    <el-form-item label="类型："  prop="resource" class="radio">
      <el-radio-group v-model="ruleForm.resource">
        <el-radio label="外来人员" />
        <el-radio label="老师" />
        <el-radio label="学生" />
      </el-radio-group>
    </el-form-item>

    <el-form label-width="100px" :model="parameter" class="demo-ruleForm">
      
      <el-form-item label="访客名称" prop="username" :rules="[
            { required: true, message: '请输入访客名称' },
            { type: 'string', message: '请输入访客名称' },
          ]">
        <el-input v-model="parameter.username" placeholder="请输入访客名称" type="text" autocomplete="off" />
      </el-form-item>

      <el-form-item label="手机号" prop="mobile" :rules="[
            { required: true, message: '请输入手机号' },
            { type: 'number', message: '请输入手机号' },
          ]">
        <el-input v-model.number="parameter.mobile" placeholder="请输入手机号" type="text" autocomplete="off" />
      </el-form-item>

      <el-form-item label="openid" prop="openid" :rules="[
            { required: true, message: '请输入openid' },
            { type: 'number', message: '请输入openid' },
          ]">
        <el-input v-model.number="parameter.openid" placeholder="请输入openid" type="text" autocomplete="off" />
      </el-form-item>

      <el-form-item label="身份证号" prop="card" :rules="[
            { required: true, message: '请输入身份证号' },
            { type: 'number', message: '请输入身份证号' },
          ]">
        <el-input v-model.number="parameter.card" placeholder="请输入身份证号" type="text" autocomplete="off" />
      </el-form-item>

      <el-form-item label="车牌号" prop="carnumber" :rules="[
            { required: true, message: '请输入车牌号' },
            { type: 'string', message: '请输入车牌号' },
          ]">
        <el-input v-model.string="parameter.carnumber" placeholder="请输入车牌号" type="text" autocomplete="off" />
      </el-form-item>

      <el-form-item label="理由" prop="reason" :rules="[
            { required: true, message: '请输入理由' },
            { type: 'string', message: '请输入理由' },
          ]">
        <el-input v-model.string="parameter.reason" placeholder="请输入理由" type="text" autocomplete="off" />
      </el-form-item>

      <el-form-item label="部门" prop="department" :rules="[
              { required: true, message: '请选择部门' },
              { type: 'string[]', message: '请选择部门' },
            ]">
        <el-cascader v-model="parentId" :emitPath="false" class="cascader" :props="optprops" :options="options2"
          placeholder="请选择部门" clearable />
      </el-form-item>

      <el-form-item label="进校时间" prop="starttime">
        <div class="demo-date-picker">
          <div class="block">
            <el-date-picker v-model="parameter.starttime" type="datetime" placeholder="进校时间"
              format="YYYY/MM/DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" clearable />
          </div>
        </div>
      </el-form-item>
      <el-form-item label="离校时间" prop="endtime">
        <div class="demo-date-picker">
          <div class="block">
            <el-date-picker v-model="parameter.endtime" type="datetime" placeholder="请选择离校时间"
              format="YYYY/MM/DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" clearable />
          </div>
        </div>
      </el-form-item>

      <el-form-item label="高风险地区" prop="resource">
            <el-radio-group v-model="ruleForm.resource1">
              <el-radio label="是" />
              <el-radio label="否" />
            </el-radio-group>
          </el-form-item>
          <el-form-item label="接触过高风险" prop="resource">
            <el-radio-group v-model="ruleForm.resource2">
              <el-radio label="是" />
              <el-radio label="否" />
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否离京" prop="resource">
            <el-radio-group v-model="ruleForm.resource3">
              <el-radio label="是" />
              <el-radio label="否" />
            </el-radio-group>
          </el-form-item>
          <el-form-item label="健康状态" prop="resource">
            <el-radio-group v-model="ruleForm.resource4">
              <el-radio label="良好" />
              <el-radio label="一般" />
              <el-radio label="差" />
            </el-radio-group>
          </el-form-item>

    </el-form>

  </div>

  <div class="right">
    <text>上传图片：</text>
    <el-upload
      class="upload-demo"
      drag
      action="http://121.42.230.80/api/visit/visituser/multiUpload"
      multiple
    >
    <el-icon class="el-icon--upload"><upload-filled /></el-icon>
    <div class="el-upload__text">
      将文件拖到此处 <em>点击上传</em>
    </div>
    <template #tip>
      <div class="el-upload__tip">
        jpg/png 小于 500kb 的文件
      </div>
    </template>
  </el-upload>

  </div>

</div>

<div class="button">
  <el-button>取消</el-button>
  <el-button type="primary" @click="add">确定</el-button>
</div>

</template>

<script setup lang='ts'>
  import {ref,reactive} from 'vue'
  import router from '../../router/router'
  import type { FormInstance } from 'element-plus'
  import { ElMessage } from "element-plus";
  import {department,visituser} from '../../api/login/index' //接口
  import { UploadFilled } from '@element-plus/icons-vue'

// 三级联动
let parentId = ref('')  //当前选中的

let optprops = {
  value: 'name',
  label: 'name',
  children: 'son'
}

const options2 = ref([])

let options3 = async() => {
  let res = await department({})
  // console.log(res);
  options2.value = res.data
}
options3()


const ruleForm = reactive({     
  resource: '',
  resource4: '',
  resource3: '',
  resource2: '',
  resource1: ''
})


// 点击添加

let parameter:any = reactive({  //参数
  address: '山东省 菏泽市 曹县',
  adduserid: 450,
  card: '132323232324242',
  carnumber: '鲁R•QU889',
  department: 116,
  endtime: '2022-09-15 00:00:00',
  healthcode: '',
  is_contact_danger: 0,
  is_go_danger: 0,
  is_health: 1,
  is_leave: 0,
  mobile: '',
  nucleicacid: '',
  openid: '1',
  reason: '暂无',
  starttime: '2022-09-01 00:00:00',
  travelcode: 'http://visit.lening365.com/uploaded/null9339558e-8150-4790-a108-e45a588f3c43123.jpg',
  type: 1,
  username: '',
  vaccination: ''
})

let add = async()=>{
  parameter.department = parentId.value[parentId.value.length -1 ] //截取到最后一个值
  let res:any = await visituser(parameter)
  console.log(res);
  if(res.code==='00000'){
    ElMessage({
      message: "添加成功",
      type: "success",
    });
    router.push('visitor')
  }
  
}


</script>


<style scoped lang='less'>
.root{
  display: flex;
}
.radio{
  margin-left: 28px;
}
.left{
  width: 358px;
  margin-right: 100px;
}
.button{
  text-align: center;
}
.upload-demo{
  width: 500px;
}
</style>